<template>
	<view>
		<!-- <button type="primary" open-type="getUserInfo" lang="zh_CN" @click="dianji">获取用户信息</button> -->
		<!-- 头像 -->
		<view v-if="userInfo">
			<view class="top">
				<image :src="userInfo.avatarUrl" class="head_icon"></image>
				<text>{{userInfo.nickName}}</text>
			</view>
			<!-- 下面的按钮 -->
			<view class="icon">
				<view @click="history">
					<image src="../../static/img/history.png" class="icon_img"></image>
					<view>历史</view>
				</view>
				<view @click="storeUp">
					<image src="../../static/img/start.png" class="icon_img"></image>
					<view>收藏</view>
				</view>
				<view>
					<image src="../../static/img/pyq.png" class="icon_img"></image>
					<view>分享</view>
				</view>
				<view>
					<image src="../../static/img/ke.png" class="icon_img"></image>
					<view>客服</view>
				</view>
			</view>
		</view>
		<view v-else class="login">
			<button type="primary" open-type="getUserInfo" lang="zh_CN" @click="dianji">点击授权个人信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: ""
			}
		},
		methods: {
			// 初始化用户信息
			ininData() {
				this.userInfo = uni.getStorageSync("userInfo")
			},
			dianji() {
				let that=this
				uni.getUserProfile({
					desc: '用于完善用户资料',
					success(e) {
						console.log(e.userInfo);
						uni.setStorageSync("userInfo",e.userInfo)
						that.ininData()
					},
					fail() {
						uni.showToast({
							icon: "none",
							title: '您取消了登录授权'
						})
					}
				})
				
			},
			history(){
				if(uni.getStorageSync("userInfo")){
					uni.navigateTo({
						url:'../historystart/historystart?page=历史'
					})
				}else{
					this.ininData()
				}
			},
			storeUp(){
				if(uni.getStorageSync("userInfo")){
					uni.navigateTo({
						url:'../historystart/historystart?page=收藏'
					})
				}else{
					this.ininData()
				}
			}
		},
		onLoad() {
			this.ininData()
		}

	}
</script>

<style scoped>
	.head_icon {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.top {
		background: linear-gradient(180deg, #83a4d4, #b6fbff);
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icon_img {
		width: 70rpx;
		height: 70rpx;
	}

	.icon {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.login {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
